<template>
  <div>

    <el-card class="my-card">
      <div class="top">
        <div class="text">公共主页</div>
        <el-button type="primary" :icon="RefreshRight" v-show="show" @click="GetLIst">刷新</el-button>
        <!-- <el-button type="danger" :icon="Delete" v-show="show" @click="remove">删除token</el-button> -->
      </div>
      <el-table :data="tableData" style="width: 100%" v-if="show">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="id" width="220" />
        <el-table-column prop="picture" label="picture" width="120">
          <template #="{ row }">
            <img :src="row.picture.data.url" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="name" width="120" />
        <el-table-column prop="about" label="about" width="120" />
        <el-table-column prop="category" label="category" width="120" />
        <el-table-column prop="tasks" label="tasks" width="320" />
      </el-table>
      <el-empty v-else>
        <div class="f-button" @click="userlogin">Facebook 登录</div>
      </el-empty>
    </el-card>

  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick, watch } from "vue";
import { useUserInfoStore } from '@/stores/userInfo'
import { Delete, RefreshRight } from '@element-plus/icons-vue'
// @ts-ignore
import { reqFbtoken, reqBmid, reqPublic } from '@/api/product/trademark.ts'
const userInfoStore = useUserInfoStore()
const access_token = ref<any>()
const code = ref<any>()
const bmid = ref<any>()
const show = ref<any>(false)
const tableData = ref<any>([
])
onMounted(() => {
  if (localStorage.getItem('keytoken')) {
    //显示列表
    show.value = true
    access_token.value = localStorage.getItem('keytoken')
    GetLIst()
  } else {
    show.value = false
    if (getQueryString('code')) {
      getInfo(getQueryString('code'))
    }else{
      userInfoStore.saveurl(window.location.href)
    }
  }


})
const getQueryString = (name: any) => {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return decodeURIComponent(r[2]); return null;
}
const userlogin = () => {
    const url = localStorage.getItem('url')
    window.location.href = `https://www.facebook.com/dialog/oauth?client_id=1026488082455623&scope=public_profile,ads_management,ads_read,pages_read_engagement,business_management,pages_manage_ads&redirect_uri=${url}`
}
const getInfo = async (code: any) => {
    const url = localStorage.getItem('url')
  const result = await reqFbtoken(code,url)
  localStorage.setItem('keytoken', result.data.access_token)
  access_token.value = result.data.access_token
  GetLIst()

}
const GetLIst = async () => {
  const List = await reqBmid(access_token.value)
  bmid.value = List.data.id;
  const result = await reqPublic(bmid.value, access_token.value)
  tableData.value = result.data.data
  show.value = true
  // console.log('access_token',access_token.value);
  // console.log('bmid',bmid.value);
  // console.log(tableData.value[0]);

}
const remove = () => {
  localStorage.removeItem('keytoken')
  window.location.reload();
}
</script>

<style lang="scss" scoped>
.f-button {
  width: 150px;
  height: 38px;
  background-color: #4267B2;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
}

.my-card {
  margin-top: 15px;

  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}

.el-table__body-wrapper {
  background-color: #4267B2 !important;
}
</style>